<template>
  <div>
    <el-form :inline="true"   class="search-form" size="medium" label-width="120px">
      <el-form-item label="市场名称：">
        <el-select v-model="searchForm.marketId" placeholder="请选择市场" >
          <el-option v-for="(item,index) in store.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="区域名称：" >
        <el-input v-model="searchForm.regionName" clearable placeholder="区域名称"></el-input>
      </el-form-item>
      <el-form-item label="租赁方式：">
        <el-select v-model="searchForm.regionType" placeholder="状态" style="width:200px;">
          <el-option
            v-for="item in regionTypeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="剩余租赁范围：" >
        <el-input v-model="searchForm.minRegionRestNum" style="width:100px;"></el-input>-
        <el-input v-model="searchForm.maxRegionRestNum" style="width:100px;"></el-input>
      </el-form-item>
      <el-form-item  label="月租金范围：" >
        <el-input v-model="searchForm.minRegionRentFee" style="width:100px;"></el-input>-
        <el-input v-model="searchForm.maxRegionRentFee" style="width:100px;"></el-input>
      </el-form-item>
      <el-form-item label="租赁剩余：">
        <el-select v-model="searchForm.isRest" placeholder="状态">
          <el-option
            v-for="item in restList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="searchData">查询</el-button>
        <el-button @click="resetForm" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table  :data="regionList" border v-loading="loading">
      <el-table-column prop="regionName" label="区域名称" ></el-table-column>
      <el-table-column prop="regionRemark" label="地理位置"></el-table-column>
      <el-table-column prop="market.marketName" label="所属市场"></el-table-column>
      <el-table-column label="租赁类型" width="100px" align="center">
        <template  slot-scope="scope">
          <span>{{scope.row.regionType | filteRegionType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="总区域面积/车位数" align="center">
        <template  slot-scope="scope">
          <span>{{scope.row.regionNum}}{{scope.row.regionType | filteRegionUnit}}</span>
        </template>
      </el-table-column>
      <el-table-column label="已租面积(车位)" align="center">
        <template  slot-scope="scope">
          <span>{{(scope.row.regionNum || 0)  - (scope.row.regionRestNum || 0) }}{{scope.row.regionType | filteRegionUnit}}</span>
        </template>
      </el-table-column>
      <el-table-column label="剩余车位数/面积" align="center">
        <template  slot-scope="scope">
          <span>{{scope.row.regionRestNum || 0}}{{scope.row.regionType | filteRegionUnit}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="regionRentFee" label="每月单位租金(元)"></el-table-column>
      <el-table-column label="操作" align="center" width="150px">
        <template slot-scope="scope">
          <!--<el-dropdown trigger="click">-->
            <!--<el-button type="primary" size="small" >-->
              <!--更多菜单<i class="el-icon-arrow-down el-icon--right"></i>-->
            <!--</el-button>-->
            <el-button type="primary" size="small" @click.native="handleEdit(scope.row.regionId)">编辑</el-button>
            <!--<el-dropdown-menu slot="dropdown">-->
              <!--<el-dropdown-item @click.native="handleEdit(scope.row.regionId)">编辑</el-dropdown-item>-->
            <!--</el-dropdown-menu>-->
          <!--</el-dropdown>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageIndex"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="store.params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        regionList:[],
        pageTotal:0,
        store:{
          marketOptions:[],
          params:{
            pageSize:20,
            pageIndex:1,
            marketId:this.$marketId,
          },
        },
        regionTypeList: [
          {value: 1, name: '按面积'},
          {value: 2, name: '按车位'}
        ],
        restList: [
          {value: true, name: '有'},
          {value: false, name: '无'}
        ],
        searchForm:{
          pageSize:20,
          pageIndex:1,
          marketId:this.$marketId,
          regionName: '',
          regionType: '',
          minRegionRestNum: '',
          maxRegionRestNum: '',
          minRegionRentFee: '',
          maxRegionRentFee: '',
          isRest:''
        }
      }
    },
    created(){
      this.$store.commit('getMarketOptions',this.store)
    },
    methods:{
      resetForm(){
        for(var i in this.searchForm){
          this.searchForm[i] = ''
        }
        this.searchForm.pageSize = 20;
        this.searchForm.pageIndex = 1;
        this.searchForm.marketId = this.$marketId;
        this.getData();
      },
      searchData(){
        this.searchForm.pageIndex = 1;
        this.getData();
      },
      getData(){
        this.loading = true;
        this.$axios.get(this.$api.getRegionList,{params: this.searchForm})
          .then((res)=>{
            console.log(res)
            this.regionList = res.data.result;
            this.loading = false;
          })
        this.$axios.get(this.$api.selectRegionNum,{params: this.searchForm})
          .then((res)=>{
            this.pageTotal = res.data.result
          })
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.searchForm.pageIndex = val;
        this.getData();
      },
      handleEdit(regionId) {
        this.$router.push("/region/regionForm/"+ regionId)
      },
    },
    activated() {
      this.getData();
    },

  };
</script>
